<template>
    <!-- 卡片   cardData:传过来的数据 -->
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>秒杀{{cardData.id}}</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div class="text item">
            <!-- 下面为 展示表 -->

            <el-descriptions direction="vertical" :column="6" border>
                <el-descriptions-item label="用户名" :span="1">{{cardData.id}}</el-descriptions-item>
                <el-descriptions-item label="email" :span="2">{{cardData.email}}</el-descriptions-item>
                <el-descriptions-item label="头像" :span="2">
                    <!-- data 的 url属性获取地址 ,可通过fit确定图片如何适应到容器框，同原生 object-fit。-->
                    <el-image style="width: 100px; height: 100px" :src="url" :fit="fits[1]"></el-image>
                </el-descriptions-item>

                <el-descriptions-item label="备注" :span="1">
                    <el-tag size="big">评级</el-tag>
                    <!-- 分数 星星  -->
                    <el-rate v-model="startValue" disabled show-score text-color="#ff9900" score-template="{value}">
                    </el-rate>
                </el-descriptions-item>

                <el-descriptions-item label="秒杀" :span="5">
                    <!-- 进度条   .toFixed(2) 保留两位小数-->
                    <span><i class="el-icon-watermelon"></i>限时秒杀总数:</span>
                    <span style="color: orangered;font-family: 微软雅黑">{{Allcount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span><i class="el-icon-shopping-cart-full"></i> 限时秒杀还剩余:</span>
                    <span style="color: orangered;font-family:'微软雅黑'">{{miaoshaCount}}</span>
                    <el-progress :percentage="cardPercentage.toFixed(2)" :format="format"></el-progress>

                </el-descriptions-item>

                <!-- :span="24" -->
                <el-descriptions-item label="快来预定 名额有限" :span="2">
                    <el-button style=" padding: 3px 0" type="danger" plain @click="yuyue(cardData.id)">点击立刻预约
                    </el-button>
                </el-descriptions-item>

                <el-descriptions-item label="test" :span="2">
                    {{cardData}}
                </el-descriptions-item>
            </el-descriptions>
        </div>

    </el-card>
</template>
<script>
    export default {
        name: "anserCard",
        data() {
            return {
                // 进度条`
                // miaoshaCount:25,
                // miaoshaCount:25,
                Msg: "none",
                Allcount: this.miaoshaCount * 3,
                startValue: (Math.random() + 4).toFixed(1),
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            }
        },



        computed: {
            cardPercentage() {

                return this.miaoshaCount * 100 / this.Allcount
            }
        },
        mounted() {
            console.log("|miaoshaCount", this.miaoshaCount)
        },
        props: ['cardData', 'miaoshaCount'],
        // props: ['cardData',],
        methods: {

            format(percentage) {
                // Progress 组件设置percentage属性即可，
                // 表示进度条对应的百分比，必填，必须在 0-100。
                // 通过 format 属性来指定进度条文字内容。
                if (percentage === 0) {
                    return 0
                }
                return Number(percentage) === 100 ? '满' : `${percentage}%`;
            },

            miaosha(id) {
                // 秒杀按钮
                // console.log("秒杀：", id,"@@qid",this.$store)
                // console.log("id,",id)
                // this.$store.state.userData.id

                this.Msg = this.$store.dispatch('miaoshaReduceOne', id)
                // console.log("this.$store.miaosha.miaoshaName",this.$store.state.miaosha.miaoshaName)
            },

            yuyue(id) {
                // console.log("localStorage.getItem('userData')@@",localStorage.getItem("userData"))
                // console.log("this.$cookies.authority",this.$cookies.get("authority") == "Questioner")
                if (
                    this.$cookies.get("authority") != "Questioner"
                ) {
                    alert("不是一个questioner")
                    return
                }

                if (confirm('立即预约？') == true) {

                    // 秒杀请求 返回一个剩余值      qid "this.$store.state.userData.id"

                    this.miaosha(id)
                    // this.handleDelete(row)
                    // 进度条-1
                    if (this.miaoshaCount <= 0) {
                        this.$message({
                            message: '已经无了',
                            type: 'warning'
                        });
                        return
                    }
                    this.$message({
                        message: '限时 预约成功',
                        type: 'success'
                    });
                    // console.log("this.Msg",this.Msg)
                    this.miaoshaCount--
                    // console.log("id:", String(id), ",预约了")

                }
            },

        }
    }
</script>
<style>

</style>